{%  extends 'base.html' %}
{% load url from future %}

{% block breadcrumb %}
<li class="active">Home</li>
{% endblock %}

{% block extra_js %}
require(['networkx']);
{% endblock %}

{% block sidebar %}
  {% if google_user %}
  <p>
  <a class="btn red" href="{%  url 'graph_create' %}">Create Visualization</a>
  {# <i class="icon-plus icon-white"></i>Create Visualization</a> #}
  </p>
  <div class="graph-list">
  {% if graphs %}
    {% for graph in graphs %}
    <a class="graph-entry"
       href="{% url 'graph_detail' graph.key.id %}">{{ graph.name }}</a>
    {% endfor %}
  {% endif %}
  {# TODO: indicator for currently being updated #}
  </div>
  {% endif %}
{% endblock %}

{% block content %}
<div id="view">  {# Where the actual visualizations/details appear. #}
  {% if google_user %}
  <div class="text small">
    <h2>No visualizations yet.</h2>
    <p>1. Copy this <a target="_blank" href="https://docs.google.com/spreadsheet/ccc?key=0AiRkpvvjcIQrdHBLbWtwTDJWVUtka0l3RWRnVzFqbHc#gid=0">example spreadsheet</a> to your Google Drive and fill in your own data.</p>
    <p>2. Create your visualization!</p>
  </div>
  <div class="text small">
    <p><strong>Need more help?</strong>
    Check out the <a href="{% url 'help' %}">help section</a> for an
    overview of Network Visualizer X and instructions on how to customize
    your data set, associated meta data and the visual appearance
    of nodes and labels.</p>
  </div>
</div>

{% else %}  {# No user. #}

<div class="intro">
  <h2>What is Network Visualizer X?</h2>
  <div class="text small">
    <p>A tool that makes it simple for NGOs to
    generate visualizations of networks of support.
    It can also be used to create network graphs for other types of data.</p>
    <p>To get started, login with your google account.</p>
  </div>
  <a class="btn red" href="{% url 'login' %}">Login</a>
</div>

{% endif %}

{% endblock %}
